<template>
  <div>
    <div class="ba_f outmain">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>账户概况</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">营业总额(元)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.allMoney || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">预计收入(元)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.allEstimate || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">有效订单(单)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.allEffective || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">无效订单(单)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.allInvalidCount || 0 }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ba_f outmain mar_t20">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>交易概况</span>
        </div>
        <div class="fon_14 ab r0 mar_r10 color_9">查询日期：{{ time }}</div>
      </div>
      <div class="mar_t20">
        <el-tabs v-model="activeName1" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="外卖统计" name="wmtj"></el-tab-pane>
          <el-tab-pane label="店内统计" name="dntj"></el-tab-pane>
          <el-tab-pane label="当面付统计" name="dmftj"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">营业总额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.money || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">平台补贴金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.subsidy || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">平台服务费</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.service || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">预计收入</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.income || 0 }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">有效订单数</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.effective || 0 }}</p>
              <p class="fon_12 color_9">客单价：{{ billinfoData.unitPrice || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">取消/售后订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei ">{{ billinfoData.invalidCount || 0 }}</p>
              <p class="fon_12 color_9">取消/售后金额：{{ billinfoData.invalidMoney || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">其他费用</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ billinfoData.otherMoney || 0.00 }}</p>
              <p class="fon_12 color_9">有效订单：{{ billinfoData.otherCount || 0 }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="outmain ba_f mar_t20">
      <div class="flex-bet">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>订单概况</span>
          </div>
        </div>
        <div>
          <a :href="handelExport()" class="mar_l10"><el-button  size="medium" type="primary">导出外卖</el-button></a>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="外卖订单" name="1"></el-tab-pane>
        <el-tab-pane label="其他订单" name="2"></el-tab-pane>
      </el-tabs>
      <el-table
          :data="tableData"
          stripe
          class="mar_t20"
          v-show="activeName=='1'"
          style="width: 100%">
        <el-table-column width="100"
                         prop="takeNo"
                         label="订单序号"

        >
          <template slot-scope="scope">
            <div class="wei">#{{ scope.row.takeNo }}</div>

          </template>
        </el-table-column>
        <el-table-column
            prop="origin"
            label="订单类型"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.deliveryMode=='10'">
              <el-tag size="mini">自提</el-tag>
            </div>
            <div v-else>
              <el-tag type="success" size="mini">外卖</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="originMoney"
            label="应收金额"
        >
        </el-table-column>
        <el-table-column
            prop="discountMoney"
            label="优惠金额"
        >
        </el-table-column>
        <el-table-column
            prop="money"
            label="实付金额"
        >
          <template slot-scope="scope">
            <div class="color-green wei">+￥{{ scope.row.money }}</div>
            <div class="fon_12">{{ scope.row.payModeName }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="subsidy"
            label="补贴（平台）"
        >
          <template slot-scope="scope">
            <div class="flex color-green">
              +￥{{ scope.row.subsidy }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="serviceMoney"
            label="平台服务费"
        >
          <template slot-scope="scope">
            <div class="color-red wei">-￥{{ scope.row.serviceMoney }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="storeActualMoney"
            label="预计收入"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.state == '5'||scope.row.state == '6'" class="color-green wei">
              +￥{{ scope.row.storeActualMoney }}
            </div>
            <div v-else class="color-green wei">+￥{{ scope.row.storeActualMoney }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="storeBoxMoney"
            label="包装费(元)"
        >
        </el-table-column>
        <el-table-column
            prop="storeDeliveryMoney"
            label="配送费"
        >
        </el-table-column>
        <el-table-column
            prop="state"
            label="订单状态"
        >
          <template slot-scope="scope">
            <div>
                            <span style="color: #489620"
                                  v-if="scope.row.state == '5'||scope.row.state == '6'"><el-tag type="success"
                                                                                                size="mini">已完成</el-tag></span>
              <span style="color:#155BD4"
                    v-if="scope.row.state == '2'||scope.row.state == '3'||scope.row.state == '4'"><el-tag size="mini">待完成</el-tag></span>
              <span style="color: #df0029" v-if="scope.row.state == '9'"><el-tag type="danger"
                                                                                 size="mini">退款待处理</el-tag></span>
              <span style="color: #df0029"
                    v-if="scope.row.state == '8' || scope.row.state == '10'"><el-tag type="info"
                                                                                     size="mini">已退款</el-tag></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="zc"
            label="分账操作"
        >
          <template slot-scope="scope">
            <div class="flex">
              <span style="color: #489620" v-show="scope.row.profitSharingMsgState == '1'">已分账</span>
              <span style="color: #489620" v-show="scope.row.profitSharingMsgState == '2'">已完结分账</span>
              <span style="color: #489620" v-show="scope.row.profitSharingMsgState == '3'">
                                 <el-button type="text" @click="handelfz(scope.row.orderId)">完结分账</el-button>
                             </span>
              <span v-show="scope.row.profitSharingMsgState == '0'">--</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="zc"
            label="操作"
        >
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handelDetail(scope.row.outTradeNo,1)">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
          :data="tableData"
          stripe
          class="mar_t20"
          style="width: 100%"
          v-show="activeName=='2'">
        <el-table-column
            prop="originName"
            label="订单类型"
        >
        </el-table-column>
        <el-table-column
            prop="money"
            label="实付金额"
        >
          <template slot-scope="scope">
            <div class="color-green wei">+￥{{ scope.row.money }}</div>
            <div class="fon_12">
              <span>{{ scope.row.payModeName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="serviceMoney"
            label="平台服务费"
        >
          <template slot-scope="scope">
            <div class="color-red wei">-￥0</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="payModeName"
            label="预计收入"
        >
          <template slot-scope="scope">
            <div class="color-green wei">+￥{{ scope.row.storeActualMoney }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="state"
            label="订单状态"
        >
          <template slot-scope="scope">
            <div>
              <span style="color: #489620">已完成</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="zc"
            label="操作"
        >
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handelDetail(scope.row.outTradeNo,5)">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          :current-page.sync='page.currentPage'
          @current-change="handleCurrentChange">
      </el-pagination>
      <el-dialog
          title="订单详情"
          :visible.sync="dialogVisible"
          width="35%"
      >
        <div>
          <div class="t_c">
            <div class="fon_30 color_3 mar_b10">+{{ orderDetail.storeActualMoney }}</div>
            <div class="">
              <el-tag>#{{ orderDetail.takeNo }} 外卖订单-<span>{{ orderDetail.appointment == '1' ? '预约' : '及时' }}</span>单
              </el-tag>
            </div>
          </div>
          <el-form ref="form5" :model="form5" label-width="120px">
            <el-form-item label="外卖订单">
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>商品</div>
                <div class="pad_r_60">
                  <div class="flex-bet" v-for="item in orderDetail.goodsArr" :key="item.id">
                    <div class="mar_r60">{{ item.name }}</div>
                    <div>{{ item.money }}</div>
                  </div>
                </div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>商品优惠</div>
                <div class="pad_r_60">
                  <div class="flex-bet">
                    <div class="mar_r60">门店满减优惠</div>
                    <div>{{ orderDetail.preferentialMoney }}</div>
                  </div>
                  <div class="flex-bet">
                    <div class="mar_r60">门店代金券优惠</div>
                    <div>{{ orderDetail.couponPreferential }}</div>
                  </div>
                  <div class="flex-bet">
                    <div class="mar_r60">平台代金券优惠</div>
                    <div>{{ orderDetail.platformCouponPreferential }}</div>
                  </div>
                  <div class="flex-bet">
                    <div class="mar_r60">新客立减</div>
                    <div>{{ orderDetail.newMoney }}</div>
                  </div>
                </div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>商品小计</div>
                <div class="pad_r_60">{{ orderDetail.originMoney }}</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>商品服务费</div>
                <div class="pad_r_60">{{ orderDetail.serviceGoodsMoney }}</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>门店商品实得金额</div>
                <div style="color: #489620" class="pad_r_60">{{ orderDetail.storeGoodsMoney }}</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>包装费</div>
                <div class="pad_r_60">
                  <div class="flex-bet">
                    <div class="mar_r60">用户支付包装费</div>
                    <div>{{ orderDetail.boxMoney }}</div>
                  </div>
                  <div class="flex-bet">
                    <div class="mar_r60">平台抽佣包装费</div>
                    <div>{{ orderDetail.serviceBoxMoney }}</div>
                  </div>
                </div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>门店实得包装费</div>
                <div style="color: #489620" class="pad_r_60">{{ orderDetail.storeBoxMoney }}</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>配送费</div>
                <div class="pad_r_60">
                  <div class="flex-bet">
                    <div class="mar_r60">用户支付配送费</div>
                    <div>{{ orderDetail.deliveryMoney }}</div>
                  </div>
                  <div class="flex-bet">
                    <div class="mar_r60">平台抽佣配送费</div>
                    <div>{{ orderDetail.serviceDeliveryMoney }}</div>
                  </div>
                </div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>门店实得配送费</div>
                <div class="pad_r_60">{{ orderDetail.storeDeliveryMoney }}</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>门店实得总金额</div>
                <div style="color: #489620" class="pad_r_60">{{ orderDetail.storeActualMoney }}</div>
              </div>
            </el-form-item>
            <el-form-item label="订单信息">
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>订单号</div>
                <div class="pad_r_60">{{ orderDetail.outTradeNo }}</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>订单类型</div>
                <div class="pad_r_60">外卖</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>订单下单时间</div>
                <div class="pad_r_60">{{ orderDetail.createdAt }}</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>订单完成时间</div>
                <div class="pad_r_60">{{ orderDetail.completeAt }}</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>订单结算时间</div>
                <div class="pad_r_60">{{ orderDetail.entryAt }}</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>用户信息</div>
                <div class="pad_r_60">{{ orderDetail.receivedName }} {{ orderDetail.receivedTel }}
                  地址:{{ orderDetail.receivedAddress }}
                </div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>订单来源</div>
                <div class="pad_r_60" v-if="orderDetail.origin=='1'">微信小程序</div>
                <div class="pad_r_60" v-if="orderDetail.origin=='2'">微信公众号</div>
                <div class="pad_r_60" v-if="orderDetail.origin=='3'">支付宝</div>
                <div class="pad_r_60" v-if="orderDetail.origin=='4'">百度</div>
                <div class="pad_r_60" v-if="orderDetail.origin=='5'">H5</div>
                <div class="pad_r_60" v-if="orderDetail.origin=='6'">PC</div>
                <div class="pad_r_60" v-if="orderDetail.origin=='7'">头条</div>
              </div>
              <div class="flex-bet pad_lr_30 bor_b_df5">
                <div>配送方式</div>
                <div class="pad_r_60" v-if="orderDetail.deliveryMode=='1'">商户</div>
                <div class="pad_r_60" v-if="orderDetail.deliveryMode=='2'">达达</div>
                <div class="pad_r_60" v-if="orderDetail.deliveryMode=='3'">点我达</div>
                <div class="pad_r_60" v-if="orderDetail.deliveryMode=='4'">码科配送</div>
                <div class="pad_r_60" v-if="orderDetail.deliveryMode=='5'">顺丰</div>
                <div class="pad_r_60" v-if="orderDetail.deliveryMode=='6'">蜂鸟</div>
                <div class="pad_r_60" v-if="orderDetail.deliveryMode=='7'">闪送</div>
                <div class="pad_r_60" v-if="orderDetail.deliveryMode=='10'">自提</div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
    <edit ref="edit"></edit>
  </div>
</template>
<script>
import {billInfo, billOrderInfo, billOrderDetail, accountInfo, profitSharingFinish} from "@/api/statistics";
import Edit from "../../../views/finance/components/seeDetail";
import {mapState} from "vuex";
import index from "@/api";

export default {
  components: {Edit},
  created() {
    if (this.$route.query.time) {
      this.time = this.$route.query.time
      this.billInfo();
      this.getBillOrderInfo();
      this.getAccountInfo();
    }
  },
  computed: {
    ...mapState(['storeId'])
  },
  data() {
    return {
      activeName1: 'wmtj',
      time: '',
      billinfoData: {},
      accountInfo: {},
      activeName: '1',
      tableData: [],
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      formInline: {
        region: ''
      },
      dialogVisible: false,
      orderDetail: {},
      form5: {
        type: '1',
        userId: '',
        tel: '',
      },
    }
  },
  methods: {
    handleTabClick() {
      if (this.activeName1 == 'wmtj') {
        this.$router.push(`/storefinancerecordDetail?time=${this.time}&storeId=${this.storeId}`);
      } else if (this.activeName1 == 'dntj') {
        this.$router.push(`/storeinfinancerecordDetail?time=${this.time}&storeId=${this.storeId}`);
      } else if (this.activeName1 == 'dmftj') {
        this.$router.push(`/storecashfinancerecordDetail?time=${this.time}&storeId=${this.storeId}`);
      }
    },
    handelExport() {
      let backendPath = index.backendPath
      return backendPath + "channel/store-bill/order-export?time=" + this.time + "&storeId=" + this.storeId
    },
    async waitMoney() {
    },
    handleClick() {
      this.getBillOrderInfo()
    },
    async getAccountInfo() {
      const {data} = await accountInfo({storeId: this.storeId})
      this.accountInfo = data;
    },
    async handelDetail(outTradeNo,type) {
      if (outTradeNo) {
        this.$refs["edit"].showEdit(outTradeNo,type);
      }
    },
    async handelfz(orderId) {
      const {msg} = await profitSharingFinish({orderId, type: '1'});
      this.$baseMessage(msg, "success");
      this.getBillOrderInfo();
    },
    async billInfo() {
      if (this.time) {
        const {data} = await billInfo({'time': this.time, storeId: this.storeId, type: '1'});
        this.billinfoData = data
      }
    },
    async getBillOrderInfo() {
      var params = {
        page: this.page.currentPage,
        storeId: this.storeId,
        time: this.time,
        type: this.activeName,
      }

      const {data, count} = await billOrderInfo(params);
      this.tableData = data;
      this.page.total = count;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getBillOrderInfo()
    },
  }
}
</script>
<style scoped>
.lhh26 {
  line-height: 26px;
  height: 26px;
}

.el-table .cell {
  text-align: center;
}
</style>
